<style>
/*订单显示*/
.item{ width:100px; height:165px; border:1px solid #ccc; padding:5px;border-radius:5px;float:left;margin:5px;}
.item .pic{width:80px; float:right;text-align:center;}
.item .pic img{max-width:80px; max-height:80px;border-radius:5px;}
.item .text{text-align:center;clear:both;line-height:26px;}

.btn-status-1{background-color:#C9E2E8;}
.btn-status-2{background-color:red;}
.btn-status-3{background-color:#FDD500;}
.btn-status-4{background-color:green;}
</style>
<div class="fixed-bar">
<form class="layui-form layui-form-pane fixed-bar-form" action="{:url()}" method="get" id="distributing-search">
<div class="layui-form-item">	
	<div class="layui-inline">
		<label class="layui-form-label">订单号</label>
		<div class="layui-input-inline">
			<input type="text" name="client_ordernum" lay-verify="" placeholder="输入订单号" class="layui-input">
		</div>
	</div>
	{if env('env_site') == 'riwei' }
	<div class="layui-inline">
		<label class="layui-form-label">客户单号</label>
		<div class="layui-input-inline">
			<input type="text" name="ext_id" lay-verify="" placeholder="输入客户单号" class="layui-input">
		</div>
	</div>
	{/if}
	<div class="layui-inline">
		<label class="layui-form-label">所属工厂</label>
		<div class="layui-input-inline">
			{:Form::select('factory_id', '', $factoryKV, '', '')}
		</div>
	</div>
	<div class="layui-inline">
		<label class="layui-form-label">裁床日期</label>
		<div class="layui-input-inline">
			<input type="text" name="caichuang_over_date_range" readonly="" id="caichuang_over_date_range" lay-verify="" placeholder="选择裁床完成日期" class="layui-input">
		</div>
	</div>
	<div class="layui-inline">
		<button type="submit" class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
	</div>
</div>
</form>
</div>

<div class="layui-row">
	<div id="view"><img src="/static/mp/image/loading.gif"></div>
</div>
<script id="tpl" type="text/html">
{{#  layui.each(d, function(kkk, vvv){ }}
	<div class="item layui-anim layui-anim-scaleSpring item-{{ vvv.client_ordernum }}">
		<div class="pic"><img src="{{ vvv.pic }}" class="lay-pic"></div>
		<div class="text">
			<a href="{:url('detail')}?id={{ vvv.id }}" class="hisi-iframe" hisi-data="{width: '800px', height: '600px'}" title="配料清单">{{ vvv.client_ordernum }}</a><br>
			{{ vvv.shipment_time_text }}<br>
			<a href="javascript:void(0)" class="layui-btn layui-btn-xs action-text {{ btnStatusArr[vvv.status] }}" data-client_ordernum="{{ vvv.client_ordernum }}" data-id="{{ vvv.id }}" data-status="{{ vvv.status }}">{{ vvv.action_text }}</a>
		</div>
	</div>
{{#  }); }}
</script>

{include file="system@block/layui" /}

<script>
	var btnStatusArr = {"1":"layui-btn-normal","2":"layui-btn-danger","3":"layui-btn-warm","4":""};
	layui.use([ 'element', 'layer', 'laytpl', 'laydate'], function() {
		var element = layui.element;
		var layer = layui.layer;
		var $ = layui.jquery;
		var form = layui.form;
		var laytpl = layui.laytpl;
		var laydate = layui.laydate;
		
		var orderArr = [];
		var isFirst = true;
		
		laydate.render({
		    elem: '#caichuang_over_date_range'
		    ,range: '~'
		    ,theme: 'molv'
		    ,mark: {'{:$today}':''}
		    ,change: function(value, date, endDate){
		    	$('#caichuang_over_date_range').val(value);
            	$('#layui-laydate1').remove();//关闭面板
            }
		});
		
     	// 获取订单
		window.getOrders = function () {
			$.ajax({
			   type: "POST",
			   url: "{:url('')}",
			   data: $('#distributing-search').serialize(),
			   dataType:"json",
			   success: function(res){
				   if (isFirst) { // 更新全部
					   orderArr = [];
					   for (var i in res.data) {
						   var clientOrdernum = res.data[i].client_ordernum;
						   orderArr.push(clientOrdernum);
					   }
					   
					   var Tpl = $('#tpl').html();
					   laytpl(Tpl).render(res.data, function(html){
					   		$('#view').html(html);
					   });
				   } else {
					   var newOrderArr = [];
					   for(var i in res.data) {
						   var clientOrdernum = res.data[i].client_ordernum;
						   newOrderArr.push(clientOrdernum);
					   }
					   // 删除不存在的
					   for(var n in orderArr) {
						   if (newOrderArr.indexOf(orderArr[n]) == -1) {
							   $(".item-"+orderArr[n]).remove();
							   orderArr.splice(n, 1);
						   }
					   }
					   // 检测新增和修改
					   for(var i in res.data) {
						   var clientOrdernum = res.data[i].client_ordernum;
						   if (orderArr.indexOf(clientOrdernum) == -1) { // 新增
							   var Tpl = $('#tpl').html();
							   laytpl(Tpl).render([res.data[i]], function(html){
							   		$('#view').prepend(html);
							   });
							   orderArr.push(clientOrdernum);
						   } else {
							   if (res.data[i].status != $(".item-"+clientOrdernum + " .action-text").attr('data-status')) {
								   $(".item-"+clientOrdernum + " .action-text").attr('data-status', res.data[i].status);
								   $(".item-"+clientOrdernum + " .action-text").html(res.data[i].action_text);
								   $(".item-"+clientOrdernum + " .action-text").removeClass('layui-btn-normal');
								   $(".item-"+clientOrdernum + " .action-text").removeClass('layui-btn-danger');
								   $(".item-"+clientOrdernum + " .action-text").removeClass('layui-btn-warm');
								   $(".item-"+clientOrdernum + " .action-text").addClass(btnStatusArr[res.data[i].status]);
							   }
						   }
					   }
					   
				   }
				   isFirst = false;
				   element.init();
			   }
			});
		}
		getOrders();
		var getOrdersInt = setInterval("getOrders()", 20000);
		
		// 搜索
		$(document).on('submit', '#distributing-search', function() {
			isFirst = true;
			$('#view').html('<img src="/static/mp/image/loading.gif">');
			getOrders();
	        return false;
	    });
		
		// 确认收货
		$(document).on('click','.action-text',function(){
			var status = $(this).attr('data-status');
			var id = $(this).attr('data-id');
			var clientOrdernum = $(this).attr('data-client_ordernum');
			if (status == 4) {
				layer.confirm("您确定要执行该操作吗？", {btn: ['确认','取消']}, function(){
					$.ajax({
					   type: "POST",
					   url: "{:url('receipt')}",
					   data: "id="+id,
					   dataType:"json",
					   success: function(res){
						   if (res.code == 1) {
							   	$(".item-"+clientOrdernum).remove();
								layer.msg(res.msg, {icon: 1});
							} else {
								layer.msg(res.msg, {icon: 2,anim: 6});
							}
					   }
					})
				});
			}
		});
		
	});
</script>